<template>
  <!-- 进件管理 -->
  <div id="app">
    <div class="width_96 padding_10 box">
      <el-form ref="form" :model="form" label-width="100px" size="medium">
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label="代理等级：" prop="username">
              <el-select class="width_100" v-model="form.time">
                <el-option value="1" label="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="商户类型：" prop="username">
              <el-select class="width_100" v-model="form.time">
                <el-option value="1" label="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="选择地区：" prop="username">
              <el-select class="width_100" v-model="form.time">
                <el-option value="1" label="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="进件通道：" prop="username">
              <el-select class="width_100" v-model="form.time">
                <el-option value="1" label="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="margin_top_10">
          <el-col :span="6">
            <el-form-item label="审核状态：" prop="username">
              <el-select class="width_100" v-model="form.time">
                <el-option value="1" label="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="" label-width="0px" prop="username">
              <div class="display_flex">
                <el-select style="width: 90px" v-model="form.time">
                  <el-option value="1" label="1"></el-option>
                </el-select>
                <div class="flex_1">
                  <el-date-picker v-model="form.time" class="width_100" type="daterange" align="right" unlink-panels
                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
                  </el-date-picker>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="" label-width="0px" prop="username">
              <el-input placeholder="请输入内容" v-model="input3" class="input-with-select">
                <el-select v-model="form.input4" style="width: 90px" slot="prepend" placeholder="请选择">
                  <el-option label="餐厅名" value="1"></el-option>
                  <el-option label="订单号" value="2"></el-option>
                  <el-option label="用户电话" value="3"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="width_100 display_flex">
              <!-- <div class="flex_1"></div> -->
              <el-button type="primary" size="mini">查询</el-button>
              <el-button>重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="width_96 padding_10 box margin_top_10">
      <el-row :gutter="20">
        <el-col :span="4">
          <div class="small_box pic_1">
            <div>商户总数</div>
            <div class="num">12345698</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="small_box pic_2">
            <div>进件总数</div>
            <div class="num">12345698</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="small_box pic_3">
            <div>待提交</div>
            <div class="num">12345698</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="small_box pic_4">
            <div>审核中</div>
            <div class="num">12345698</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="small_box pic_5">
            <div>审核通过</div>
            <div class="num">12345698</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="small_box pic_6">
            <div>审核失败</div>
            <div class="num">12345698</div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="width_96 padding_10 box margin_top_10">
      <div class="width_96">
        <el-button type="primary" size="mini">入网进件</el-button>
      </div>
      <el-table :data="list" class="margin_top_10 table_list" @selection-change="handleSelectionChange"
        style="width: 100%">
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="name" label="序号"></el-table-column>
        <el-table-column prop="date" width="110" label="商户ID"></el-table-column>
        <el-table-column prop="date" width="110" label="商户全称"></el-table-column>
        <el-table-column prop="date" width="110" label="商户编码"></el-table-column>
        <el-table-column prop="date" width="110" label="地区"></el-table-column>
        <el-table-column prop="date" width="110" label="联系人姓名"></el-table-column>
        <el-table-column prop="date" width="110" label="联系人手机号"></el-table-column>
        <el-table-column prop="date" width="110" label="归属代理商"></el-table-column>
        <el-table-column prop="date" width="110" label="代理代理"></el-table-column>
        <el-table-column prop="date" width="110" label="拓展人"></el-table-column>
        <el-table-column prop="date" width="110" label="进件通道"></el-table-column>
        <el-table-column prop="date" width="110" label="审核状态"></el-table-column>
        <el-table-column prop="date" width="140" label="审核时间"></el-table-column>
        <el-table-column prop="date" width="140" label="提交时间"></el-table-column>
        <el-table-column prop="date" fixed="right" width="210" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">商户后台</el-button>
            <el-button type="text" size="small">再次进件</el-button>
            <el-dropdown>
              <el-button type="text" size="small">更多</el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>
                  <el-button size="mini" type="text">进件详情</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button size="mini" type="text">账号设置</el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button size="mini" type="text">删除</el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div class="text_align_right margin_top_10">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal">
        </el-pagination>
      </div>

      <div class="box_height" style="width: 20px"></div>
    </div>
    <div class="box_height"></div>
  </div>
</template>
<script>
import {
  get,
  post,
  formatterCellval,
  pickerOptions
} from "../../../util/request.js"
export default {
  data() {
    return {
      form: {
        time: "",
        select: "",
        input4: ""
      },
      pickerOptions,
      input3: "",
      value: "",
      time: "",
      list: [
        {
          name: "张三",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 12
        },
        {
          name: "张三",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 12
        },
        {
          name: "张三",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 12
        },
        {
          name: "张三",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 12
        },
        {
          name: "张三",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 12
        },
        {
          name: "张三",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 12
        },
        {
          name: "张三",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 12
        },
        {
          name: "张三",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 12
        },
        {
          name: "张三",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 12
        },
        {
          name: "张三",
          date: "2023-10-26",
          address: "山东省济南市历下区泉城路",
          num: 12
        }
      ]
    }
  },
  mounted() { },
  methods: {}
}
</script>

<style scoped>
#app {
  width: 100%;
  height: 100%;
  background-color: #f1f4f9;
}

.box {
  background: #ffffff;
  border-radius: 14px;
}

.el-form>>>.el-form-item__label {
  font-size: 12px !important;
}

.el-form>>>.el-form-item__content {
  margin-left: 0 !important;
  width: 100%;
}

.el-form-item {
  width: 100%;
  display: flex;
  align-items: center;
}

.el-form>>>.el-range-input {
  font-size: 12px !important;
}

.el-form>>>.el-range-editor--medium .el-range__icon {
  font-size: 12px !important;
}

.el-form>>>.el-date-editor .el-range-input {
  width: 50% !important;
}

.small_box {
  padding: 20px 10px;
  color: #ffffff;
}

.num {
  font-size: 24px;
}

.box>>>.pic_1 {
  background: url("../../../assets/images/Merchantmeal/lanse.png") no-repeat;
  background-size: 100% 100%;
}

.box>>>.pic_2 {
  background: url("../../../assets/images/Merchantmeal/huangse.png") no-repeat;
  background-size: 100% 100%;
}

.box>>>.pic_3 {
  background: url("../../../assets/images/Merchantmeal/hongse.png") no-repeat;
  background-size: 100% 100%;
}

.box>>>.pic_4 {
  background: url("../../../assets/images/Merchantmeal/qingse.png") no-repeat;
  background-size: 100% 100%;
}

.box>>>.pic_5 {
  background: url("../../../assets/images/Merchantmeal/zise.png") no-repeat;
  background-size: 100% 100%;
}

.box>>>.pic_6 {
  background: url("../../../assets/images/Merchantmeal/zise.png") no-repeat;
  background-size: 100% 100%;
}
</style>
